<template>
    <div>
        <el-card>
            <SelecterCategory @CategoryInfo="CategoryInfo" :isShowAttrList="isShowAttrList"></SelecterCategory>
        </el-card>
        <el-card style="margin-top:20px">
            <!-- 专门用来渲染获取数据的 -->
            <div v-show="!isShowSpuList && !isShowSkuList">
                <el-button
                    type="primary"
                    icon="el-icon-plus"
                    :disabled="!category3Id"
                    @click="addSpuform"
                >添加SPU</el-button>
                <el-table :data="spuInfoList" style="width: 100%;margin-top:20px" border>
                    <el-table-column type="index" align="center" label="序号" width="80"></el-table-column>
                    <el-table-column prop="spuName" label="SPU名称" width="width"></el-table-column>
                    <el-table-column prop="description" label="SPU描述" width="width"></el-table-column>
                    <el-table-column prop="prop" label="SPU操作" width="width">
                        <template slot-scope="{row}">
                            <el-tooltip effect="light" content="添加SKU" placement="bottom">
                                <el-button
                                    type="success"
                                    icon="el-icon-plus"
                                    size="mini"
                                    @click="addSkuIinfo(row)"
                                ></el-button>
                            </el-tooltip>
                            <el-tooltip effect="light" content="修改SPU" placement="bottom">
                                <el-button
                                    type="warning"
                                    @click="updateSpuform(row)"
                                    icon="el-icon-edit"
                                    size="mini"
                                ></el-button>
                            </el-tooltip>
                            <el-tooltip effect="light" content="查看SPU的SKU列表" placement="bottom">
                                <el-button
                                    type="info"
                                    @click="showSkuList(row)"
                                    icon="el-icon-info"
                                    size="mini"
                                ></el-button>
                            </el-tooltip>
                            <el-tooltip effect="light" content="删除SPU" placement="bottom">
                                <el-popconfirm
                                    @onConfirm="delConfirm(row)"
                                    title="这是一段内容确定删除吗？"
                                    style="margin-left:10px"
                                >
                                    <el-button
                                        slot="reference"
                                        type="danger"
                                        icon="el-icon-delete"
                                        size="mini"
                                    ></el-button>
                                </el-popconfirm>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="getSpuList"
                    style="text-align: center;"
                    :current-page="page"
                    :page-sizes="[2, 3, 5]"
                    :page-size="limit"
                    :pager-count="7"
                    layout="prev, pager, next, jumper,->, sizes,total"
                    :total="totalCount"
                ></el-pagination>
            </div>

            <!-- <Spuform v-show="isShowSpuList"></Spuform> -->
            <!-- .sync -->
            <!-- <Spuform
                v-show="isShowSpuList"
                :isShowSpuList="isShowSpuList"
                @update:isShowSpuList="isShowSpuList = $event"
            ></Spuform>-->
            <Spuform
                @geigemingzi="geigemingzi"
                ref="spuFrom"
                v-show="isShowSpuList"
                :isShowSpuList.sync="isShowSpuList"
            ></Spuform>

            <Skuform ref="skuForm" v-show="isShowSkuList" :isShowSkuList.sync="isShowSkuList"></Skuform>
        </el-card>

        <el-dialog :title="`${spu.spuName}的sku列表`" :visible.sync="dialogTableVisible">
            <el-table v-loading="loading" :data="skuInfoList">
                <el-table-column property="skuName" label="名称"></el-table-column>
                <el-table-column property="price" label="价格"></el-table-column>
                <el-table-column property="weight" label="重量"></el-table-column>
                <el-table-column label="默认图片">
                    <template slot-scope="{row}">
                        <img :src="row.skuDefaultImg" style="width: 100px; height: 80px;" />
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import Spuform from './Spuform'
import Skuform from './Skuform'
export default {
    components: {
        Spuform,
        Skuform
    },
    name: "Spu",
    data() {
        return {
            spu: '',

            dialogTableVisible: false,        //dialog的显示与隐藏
            isShowSpuList: false,//是否显示spu
            isShowSkuList: false,//是否显示sku

            page: 1,
            limit: 3,

            isShowAttrList: true,//是否禁用三级分类

            category1Id: "",
            category2Id: "",
            category3Id: "",
            spuInfoList: [],
            totalCount: 0,

            skuInfoList: [], //根据spu ID


            loading: false,//默认不加载
        }
    },
    watch: {
        isShowSpuList(newValue, oldValue) {
            this.isShowAttrList = !newValue
        },
        isShowSkuList(newValue, oldValue) {
            this.isShowAttrList = !newValue
        },
    },
    methods: {
        /* 
            getListBySpuId(spuId)       sku
        */
        async showSkuList(row) {
            this.spu = row
            this.dialogTableVisible = true
            /* 
                获取数据之前加载loading
            */
            this.loading = true;
            const result = await this.$API.sku.getListBySpuId(row.id)
            if (result.code == 200 || result.code === 20000) {
                this.skuInfoList = result.data
            }
            /* 
                获取数据之后停止loading加载
            */
            this.loading = false;
        },
        /* 添加sku */
        addSkuIinfo(row) {
            this.isShowSkuList = true
            this.$refs.skuForm.addSkuInfo(this.category1Id, this.category2Id, row)
        },
        /* 删除SPU */
        async delConfirm(row) {
            // console.log(row);
            const result = await this.$API.spu.remove(row.id);
            if (result.code == 200 || result.code === 20000) {
                this.getSpuList(this.page);
            }
        },
        CategoryInfo(category) {
            let { categoryid, level } = category;
            if (level == 1) {
                this.category1Id = categoryid
                this.category2Id = ""
                this.category3Id = ""
                this.categoryInfoList = []
            } else if (level == 2) {
                this.category2Id = categoryid
                this.category3Id = ""
                this.categoryInfoList = []
            } else {
                this.category3Id = categoryid
                /* 发送ajax,获取SPU信息 */
                this.getSpuList();
            }
        },
        /* 
            获取spu分页的数据
            
        */
        async getSpuList(page = 1) {
            this.page = page
            const result = await this.$API.spu.getList(this.page, this.limit, this.category3Id)
            if (result.code == 200 || result.code === 20000) {
                // console.log(result.data);
                this.spuInfoList = result.data.records
                this.totalCount = result.data.total
            }
        },
        /* 一页显示的多少条 */
        handleSizeChange(value) {
            this.limit = value
            this.getSpuList();
        },

        /* 父组件点击添加按钮 */
        addSpuform() {
            this.isShowSpuList = true       //打开spu的添加或者修改页面
            this.$refs.spuFrom.addSpuform(this.category3Id);
        },
        /* 父组件点击修改按钮 */
        updateSpuform(row) {
            this.isShowSpuList = true       //打开spu的添加或者修改页面
            this.$refs.spuFrom.updateSpufrom(row)
        },
        geigemingzi(flag) {
            if (flag) {
                //修改
                this.$message.success("修改成功!");
                this.getSpuList(this.page)
            } else {
                //添加
                this.$message.success("添加成功!")
                this.getSpuList()
            }
        }
    }
};
</script>

<style lang='scss' scoped>
</style>
